<template>
	<view style="height: 100vh;">

		<!-- 顶部 -->
		<view class="top" style="display: flex;align-items: center;justify-content: space-between;">
			<view class="" style="display: flex;">
				<u-icon @click="back" name="close" size="40"></u-icon>
				<view class="topText" style="font-weight: bold;margin-left: 15px;font-size: 17px;">
					<p>发闲置</p>
				</view>
			</view>

			<view class=""
				style="padding: 10px 20px;border-radius: 20px;font-size: 27rpx;font-weight: 600;background-color: #fee610;">
				发布
			</view>

		</view>
		<!-- 中间 -->
		<view class="textcontent" style="">
			<textarea v-model="content" class="textare" placeholder="描述一下宝贝的品牌型号,货品来源...">
			</textarea>


			<view class=""
				style="padding-bottom: 10px;top: 50%;padding: 0 0 3px 10px;width: 100%;z-index: 999;background-color: white;border-radius: 0 0 15px 15px;">
				<!-- 上传图片 -->
				<u-upload @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"
					uploadText="添加优质首图更吸引人~"></u-upload>

				<!-- 地址定位 -->
				<view class="" @click="gotoSelectMap"
					style="padding: 5px;background-color: #f4f5f6;width:40%;display: flex;margin: 10px 0 5px 5px;height: 30px;border-radius: 15px;align-items: center;">
					<!-- leftTitle:左边标题 name：输入框名字 value：输入框选择值  placeholder：占位符 @click：点击事件-->
					<!-- <mapPosition></mapPosition>  -->
					<view class="" style="width: 100%;display: flex;justify-content: space-between;">
						<view class="" style="display: flex;">
							<u-icon style="color: #ccc;" name="map" size="28"></u-icon>
							<view class=""
								style="max-width: 80%;color: #ccc;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
								{{ckfill !== undefined ? ckfill : '默认数据鸡鸡'}}
							</view>
						</view>

						<u-icon style="color: #ccc;justify-content: center;flex: 1;" name="play-right-fill"
							size="28"></u-icon>

					</view>

				</view>

				<!-- 分类 -->
				<view class="sort" v-if="content">
					<category></category>
				</view>

			</view>


		</view>


		<!-- 底部 -->
		<view class="buttom">
			<view @click="open" class="price" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="jiage" style="font-size: 35rpx;font-weight: 1000;">
					价格
				</view>
				<view class="pricenumber" style="display: flex;align-items: center;">
					<span style="font-size: 42rpx;font-weight: 1000;color: #ef5f5f;">￥{{money}}</span>
					<u-icon name="arrow-right" size="30"></u-icon>

				</view>

			</view>

			<!-- 灰色线 -->
			<view style="height: 1px; background-color: #ccc;margin-top: 10px;"></view>

			<view @click="showActiveSheet" class=""
				style="margin-top: 8px;display: flex;align-items: center;justify-content: space-between;">



				<view style="font-size: 32rpx;font-weight: 1000;">
					发货方式
				</view>
				<view class="pricenumber" style="display: flex;">
					<span style="font-size: 35rpx;font-weight: 1000;color: #ccc;">邮寄 (运费未填)</span>
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>


		</view>


		<piaoyipopup @confirm="confirm" @cancel="sheetVisible = false" :visible="sheetVisible" maskCloseAble="false">
			<view class="first" style="display: flex;flex-direction: column;padding: 10px;">
				<!-- 邮寄方式 -->
				<view class=""
					style="display: flex;flex-direction: column;background-color: white;border-radius: 20px;padding: 10px 20px 0px 20px;">
					<span style="font-weight: 700;font-size: 30rpx;">邮寄 (运费)</span>
					<u-radio-group v-model="delivery" @change="radioGroupChange" style="margin: 20px 0px 0px 0px;">
						<u-radio active-color="yellow" @change="radioChange" v-for="(item, index) in list" :key="index"
							:name="index">
							{{item.name}}
						</u-radio>
					</u-radio-group>



					<u-input v-if="delivery === 0" style="margin: 10px 0 20px 0;" class="tips"
						v-model="formattedPostPrice" type="textarea" height="100" placeholder="￥0.00" maxlength="5" />

					<!-- <textarea class="tips" style="height: 40px;background-color: #f7f7f7;margin-bottom: 20px;border-radius: 15px;"
						placeholder-style="color:#ccc" placeholder="￥0.00" /> -->
				</view>

				<!-- 自提 -->
				<view class=""
					style="height: 50px;align-items: center;padding: 0px 10px;margin-top: 10px;display: flex;justify-content: space-between;background-color: white;border-radius: 20px;">
					<view class="" style="font-size: 30rpx;">
						自提
					</view>

					<u-checkbox class="checkBox" @change="changeCheckBox" active-color="yellow" shape="circle"
						v-model="checked"></u-checkbox>



				</view>

				<!-- 确定 -->
				<view class="" style="margin-top: 25%;">
					<button style="background-color: #ffea2f;height: 50px;border-radius: 30px;">确定</button>
				</view>

			</view>
		</piaoyipopup>


		<keyboard ref="cukeyboard" @change="changeKeyborder" @confirm="confirm" @hide="hide"
			style="position: absolute;bottom: 0;" />

	</view>
</template>

<script>
	// import mapPosition from './components/mapPosition.vue'
	import category from './components/category.vue'
	import piaoyipopup from '@/uni_modules/piaoyi-popup/components/piaoyi-popup/piaoyi-popup.vue'
	import keyboard from '@/components/cu-keyboard/cu-keyboard.vue'
	export default {
		data() {
			return {
				show: false,
				sheetVisible: false,

				list: [{
						name: '自己填'
					},
					{
						name: '包邮'
					},
					{
						name: '按买家距离估算'
					}
				],

				checked: false, //是否自提
				delivery: 0, //发货方式 
				postPrice: '', //邮费

				keyBoardValue: '',

				ckfill: '',

				content: '', //文本框主要内容
				money: '0.00' //价格
			}
		},
		components: {
			piaoyipopup,
			keyboard,
			category,
			// mapPosition
		},

		computed: {
			formattedPostPrice: {
				get() {
					if (this.postPrice === '') {
						return '';
					}
					// 将输入的数字格式化为￥0.00的形式
					return '￥' + parseFloat(this.postPrice).toFixed(2);
				},
				set(value) {
					// 去掉￥符号，只保留数字
					const newValue = value.replace(/[^\d.]/g, '');
					this.postPrice = newValue;
				}
			}
		},
		onLoad(options) {
			//选地址页面来的数据
			this.ckfill = decodeURIComponent(options.address)


		},

		methods: {
			gotoSelectMap() {
				uni.navigateTo({
					url: '../../pagesB/selectAddress/selectAddress'
				})
			},

			showActiveSheet() {
				this.sheetVisible = true
			},
			back() {
				uni.navigateBack()
			},
			// 父组件中键盘事件
			changeKeyborder(value) {
				this.money = value
			},
			open() {
				console.log("打开键盘");
				this.$refs.cukeyboard.open();
			},
			confirm(e) {
				console.log("确定", e);
			},
			hide() {
				this.$emit("closeKeyBorder")
				console.log("关闭键盘")
			},
			//-->

			//单选框事件
			// 选中某个单选框时，由radio时触发
			//e始终为true
			changeCheckBox() {
				this.checked = !this.checked

			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			}

			//-->
		},
	}
</script>

<style lang="scss" scoped>
	.top {
		padding-top: 20px;
		margin: 0 15px;
	}

	.textcontent {

		padding: 20px 15px;

		.textare {
			border-radius: 15px 15px 0 0;
			padding-top: 20px;
			background-color: white;
			width: 100%;

			color: silver;

		}
	}

	.buttom {
		background-color: white;
		display: flex;
		flex-direction: column;
		margin: 0 20px;
		padding: 20px;
		border-radius: 20px;
	}

	.pop {
		height: 50%;
		width: 100%;
	}

	.keyboard {
		width: 100vw;
		height: 40vh;
	}

	.jiage {
		font-family: keai;
	}

	.tips {
		width: 100%;
		height: 45px;
		border-radius: 20px;
		background-color: #f7f7f7;
		border-radius: 10px;
		border: 1px solid #f7f7f7;
		position: relative;
		font-size: 16px;
	}

	.tips::before {
		content: '';
		width: 0;
		height: 0;
		border-width: 10px;
		border-color: transparent transparent #f7f7f7 transparent;
		border-style: dashed dashed solid dashed;
		position: absolute;
		top: -21px;
		left: 10px;
	}

	.tips::after {
		content: '';
		width: 0;
		height: 0;
		border-width: 10px;
		border-color: transparent transparent #f7f7f7 transparent;
		border-style: dashed dashed solid dashed;
		position: absolute;
		top: -20px;
		left: 10px;
	}


	.tips /deep/ textarea {

		font-size: 44rpx;
		padding: 17rpx 17rpx;

	}

	.checkBox /deep/ text {
		font-size: 30rpx;
		color: black;
	}
</style>